<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
    <div id="view" style="background:url(1.jpg) 50%; width: 1000px; height: 556px;">
        <input type="button" value="截图" onclick="takeScreenshot()">
    </div>
</body>
<script type="text/javascript">
    function takeScreenshot() {
        html2canvas(document.querySelector("#view")).then(canvas => {
            document.body.appendChild(canvas);
            //以下代码为下载此图片功能
            var url = canvas.toDataURL();
            var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate() +
                ".png").appendTo("body");
            triggerDownload[0].click();
            triggerDownload.remove();
        });
    }
</script>

</html>